<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="pdf-preview-dialog" v-if="visible">
                <div class="pdf-preview-dialog__mask" @click="onClose"></div>
                <div class="pdf-preview-dialog__content">
                    <div class="pdf-preview-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>
                    <iframe :src="pdfUrl"></iframe>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
const pdfUrl = ref("");
const visible = ref(false);

const onClose = () => {
    visible.value = false;
};

defineExpose({
    show(url) {
        visible.value = true;
        pdfUrl.value = url;
    },
});
</script>
<style lang="scss" scoped>
.pdf-preview-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1200px;
        height: 95%;
        transform: translate(-50%, -50%);
        border-radius: 10px;

        iframe {
            width: 100%;
            height: 100%;
            background: #000;
            border: none;
        }
    }

    &__close {
        position: absolute;
        top: 0;
        right: -40px;
        cursor: pointer;
        z-index: 99;

        img {
            width: 24px;
            height: 24px;
        }
    }
}
</style>
